<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉菜单</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#nav{
				background: #eee;
				width: 600px;
				height: 40px;
				margin: 0 auto;
			}
			ul{
				list-style: none;
			}
			ul li{
				float: left;
				line-height: 40px;
				text-align: center;
				position: relative;
			}
			a{
				text-decoration: none;
				color: #000;
				display: block;
				padding: 0 10px;
				height: 40px;
			}
			a:hover{
				color: #fff;
				background: #666;
			}
			ul li ul li{
				float: none;
				background: #EEEEEE;
				margin-top: 2px;
			}
			ul li ul{
				position: absolute;
				top: 40px;
				left: 0px;
				display: none;
			}
			ul li ul li a:hover{
				background: #06f;
			}
			ul li:hover ul{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程大厅</a>
					<ul>
						<li><a href="#">javascript</a></li>
						<li><a href="#">jquery</a></li>
					</ul>
				</li>
				<li><a href="#">学习中心</a></li>
				<li><a href="#">经典案例</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
		</div>
	</body>
</html>
